<template>
  <div class="login-page">
    <m-form :rules="rules" class="form" :model="model" ref="formRef">
      <m-form-item prop="email" label="邮箱地址">
        <m-input
          type="text"
          placeholder="请输入邮箱地址"
          v-model="model.email"
        />
      </m-form-item>
      <m-form-item prop="nickName" label="昵称">
        <m-input
          type="text"
          placeholder="请输入昵称"
          v-model="model.nickName"
        />
      </m-form-item>
      <m-form-item prop="password" label="密码">
        <m-input
          type="password"
          placeholder="请输入密码"
          v-model="model.password"
        />
      </m-form-item>
      <m-form-item
        ><button
          @click.prevent="submitForm"
          class="btn btn-primary btn-block btn-large"
        >
          注册
        </button>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
// import { useStore } from 'vuex';
// import { useRouter } from 'vue-router';
import MForm from '@/components/MForm';
import MFormItem from '@/components/MForm/MFormItem';
import MInput from '@/components/MForm/MInput';
import { signup } from '@/api/user';
export default {
  name: 'Login',
  components: {
    MForm,
    MFormItem,
    MInput,
  },
  setup() {
    // const router = useRouter();
    // const store = useStore();
    const rules = {
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change'],
        },
      ],
      nickName: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      password: [
        { required: true, message: '请输入与密码', trigger: 'blur' },
        { min: 6, message: '密码长度大于6位', trigger: 'blur' },
      ],
      // passwordConfirm: [
      //   { required: true, message: '请输入与密码', trigger: 'blur' },
      // ],
    };
    const formRef = ref();
    const model = reactive({
      email: '',
      nickName: '',
      password: '',
      // passwordConfirm: '',
    });
    const signupApi = async () => {
      const res = await signup(model);
      console.log(res);
    };

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          signupApi();
        }
      });
    };

    return {
      rules,
      model,
      formRef,
      submitForm,
    };
  },
};
</script>

<style lang="scss">
.login-page {
  max-width: 330px;
  margin: 0 auto;
  .form {
    margin-top: 40px;
  }
}
</style>
